<template>
<div>
  <div v-show="certificateListVisible" class="mod-config">
    <div class="div-s">
    <el-form :label-position="labelPosition" :inline="true" label-width="70px" class="queryFormed">
        <el-row class="row-s">
          <el-col :span="6">
          <el-form-item label="姓名">
            <el-input v-model="name" clearable placeholder="请填写姓名"></el-input>
          </el-form-item>
      </el-col>
      <el-col  :span="6">
        <el-form-item>
      </el-form-item>
        </el-col>
      <el-col  :span="6">
        <el-form-item>
      </el-form-item>
        </el-col>
      <el-col class="col-right" :span="6">
      <el-form-item class="item-all">
      <el-button v-if="isAuth('certificate:certificateInfo:info')" class="buttonItem" size="mini" plain @click="queryAll()">重 置</el-button>
      <el-button v-if="isAuth('certificate:certificateInfo:info')" class="buttonItem" size="mini" type="primary" @click="clickDataFormSubmit()">搜 索</el-button>
      </el-form-item>
      </el-col>
      </el-row>
    </el-form>
    </div>
    <div class="div-e">
      <div class="div-inquire">
        <div class="in-t">
          <div class="in-ts"></div>
          <h3>证书查询</h3>
        </div>
        <div class="div-button">
        <el-button class="div-buttonItemb" v-if="isAuth('certificate:certificateInfo:info')" size="mini" type="primary" plain icon="el-icon-upload2" @click="exportXls()">数据导出</el-button>
        </div>
      </div>
    <el-tabs class="tabs-s" v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="在职员工" name="first">
      <certificate-type ref="child" :value1="value1" :name="name" @clickCertificateListVisible="clickCertificateListVisible" :certificateType="certificateType"></certificate-type>
    </el-tab-pane>
    <el-tab-pane label="挂靠" name="second">
      <certificate-type ref="childa" :value1="value1" :name="name" @clickCertificateListVisible="clickCertificateListVisible" :certificateType="certificateType"  :days="days"></certificate-type>
    </el-tab-pane>
    <el-tab-pane label="非在职员工" name="third">
      <certificate-type ref="childb" :value1="value1" :name="name" @clickCertificateListVisible="clickCertificateListVisible" :certificateType="certificateType"></certificate-type>
    </el-tab-pane>
  </el-tabs>
  </div>
  </div>
  <certificate-detail v-if="certificateListVisibleDetail" :isEdited="isEdited" :flag="flag" :visId="visId"></certificate-detail>
  </div>
</template>

<script>
  import Vue from 'vue'
  import merge from 'lodash/merge'
  import CertificateDetail from '../certinfo/certificate-list-detail'
  import CertificateType from '../certifirenewal/income-type.vue'
  export default {
    data () {
      return {
        labelPosition:'right',
        flag: false,
        certificateListVisibleDetail:false,
        certificateListVisible: true,
        activeName:'first',
        loading: true,
        dataEmpty: true,
        months:3,
        value1:[],
        days:15,
        visId:{},
        editableTabs: [],
        editableTabsData:'',
        certificateType:1,
        index: 0,
        days: 15,
        type:null,
        confInfos:[],
        idType:'',
        name:'',
      }
    },
    components: {
      CertificateType,
      CertificateDetail
    },
    created () {
      this.handleClick()
    },
    mounted () {
    },
    watch: {
    },
    methods: {
      certificateinfoCrashHandler(){
      this.certificateinfoCrashVisible = true
      this.certificateListVisible = false
        this.$nextTick(() => {
          this.$refs.certificateinfoCrash.init()
      })
      },
      handleClick(tab, event) {
        if(this.activeName == 'first'){
        this.certificateType = 1
        console.log(this.certificateType);
        this.$nextTick(() => {
          // console.log(8);
          this.$refs.child.getDataList()
        })
      }
      if(this.activeName == 'second'){
        this.certificateType = 2
       this.$nextTick(() => {
         console.log(125);
          this.$refs.childa.getDataList()
        })
      }
      // third
      if(this.activeName == 'third'){
        this.certificateType = 3
       this.$nextTick(() => {
          this.$refs.childb.getDataList()
        })
      }
      },
      // routerBack(){
      // this.certificateListVisible = true
      // this.certificateListVisibleDetail = false
      // this.queryAll()
      // },
      clickDataFormSubmit(){
      if(this.activeName == 'first'){
      this.$nextTick(() => {
          this.$refs.child.getDataList()
        })
      }
      if(this.activeName == 'second'){
      this.$nextTick(() => {
          this.$refs.childa.getDataList()
        })
      }
      if(this.activeName == 'third'){
      this.$nextTick(() => {
          this.$refs.childb.getDataList()
        })
      }
      },
      clickCertificateListVisible(row){
      this.visId = row
      this.certificateListVisible = false
      this.certificateListVisibleDetail = true
      // console.log(id);
      },
      queryAll(){
        this.name = ''
        this.value1 = ''
        this.$nextTick(() => {
          this.$refs.child.getDataList()
        })
      },
      routerBack(){
      this.certificateListVisible = true
      this.certificateListVisibleDetail = false
      this.clickPackUp()
      },
      // 导出数据
      exportXls () {
        if(this.activeName == 'first'){
        this.$http({
          url: this.$http.adornUrl('/certificate/certificateInfo/exportBalance'),
          method: 'get',
          responseType: 'blob', // 防止返回乱码
          params: this.$http.adornParams({
          'certificateType':this.certificateType,
          'page': 1,
          'limit': 10,
          }),
          showLoading: true
        }).then(({data}) => {
          if (data) {
            const link = document.createElement('a')
            let blob = new Blob([data], {type: 'application/vnd.ms-excel'})
            link.style.display = 'none'
            link.href = URL.createObjectURL(blob)
            let fileName = '在职员工收支统计.xls'
            link.setAttribute('download', fileName)
            link.download = fileName // 下载的文件名
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link)
          }
        })
        }
        if(this.activeName == 'second'){
        this.$http({
          url: this.$http.adornUrl('/certificate/certificateInfo/exportBalance'),
          method: 'get',
          responseType: 'blob', // 防止返回乱码
          params: this.$http.adornParams({
          'certificateType':this.certificateType,
          'page': 1,
          'limit': 10,
          }),
          showLoading: true
        }).then(({data}) => {
          if (data) {
            const link = document.createElement('a')
            let blob = new Blob([data], {type: 'application/vnd.ms-excel'})
            link.style.display = 'none'
            link.href = URL.createObjectURL(blob)
            let fileName = '挂靠收支统计.xls'
            link.setAttribute('download', fileName)
            link.download = fileName // 下载的文件名
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link)
          }
        })
        }
        if(this.activeName == 'third'){
        this.$http({
          url: this.$http.adornUrl('/certificate/certificateInfo/exportBalance'),
          method: 'get',
          responseType: 'blob', // 防止返回乱码
          params: this.$http.adornParams({
            // 'status': this.flag ? 'crash' : this.params.status
          'certificateType':this.certificateType,
          'page': 1,
          'limit': 10,
          }),
          showLoading: true
        }).then(({data}) => {
          if (data) {
            const link = document.createElement('a')
            let blob = new Blob([data], {type: 'application/vnd.ms-excel'})
            link.style.display = 'none'
            link.href = URL.createObjectURL(blob)
            let fileName = '非在职员工收支统计.xls'
            link.setAttribute('download', fileName)
            link.download = fileName // 下载的文件名
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link)
          }
        })
        }
      },
      setParams (params) {
        this.params = params
      },
      uploadParamsb(validityType){
      this.params.validityType = validityType
      this.months = 1
      this.sanButton = 1
      this.yiButton = 2
      this.yuButton = 1
      this.$nextTick(() => {
          this.$refs.child.getDataList()
      })
      },
      uploadParams(validityType){
        this.params.validityType = validityType
        if(validityType === 0){
          this.months = 1
          this.sanButton = 2
          this.yiButton = 1
        }
      },
      // 全部
      restForm(){
      // this.params = {}
      this.params = {
          certificateType: '',
          name: '',
          validityType: ''
        }
      // this.$refs.child[this.index].init(this.activeName)
      }
    }
  }
</script>

<style lang="scss" scoped>
/deep/.el-date-editor .el-range-separator{
width:7% !important;
}
    .mod-config{
    padding: 15px !important;
    background-color: #F5F7FA;
    // margin-top: 48px;
    }
    .itemButton{
    width: 100%;
    margin-top: 10px !important;
    // margin-bottom: 10px;
}
  .queryFormed .el-form-item{
    margin-top: 8px;
    margin-bottom: 8px;
  }
  /deep/.queryFormed .el-form-item{
    .el-select .el-input__inner{
    height: 36px!important;
    padding-right: 15px!important;
    padding-left: 15px!important;
    }
    .el-input--suffix .el-input__inner{
    padding-right: 15px!important;
    padding-left: 15px!important;
    }
  }
.row-s{
  /deep/.el-col{
    display: flex;
    // justify-content: center;
    align-items: center;
    padding-left: 15px;
    padding-right: 15px;
  }
}
/deep/.col-right{
.el-form-item{
margin-left: auto!important;
}
}
/deep/.el-col{
    .fazheng{
    .el-form-item__content{
    .el-input--suffix{
    .el-input__inner{
      padding-right: 0px!important;
      padding-left: 30px!important;
       }
     }
   }
 }
}
/deep/.col-center{
  display: flex;
  align-items: center;
  justify-content: center;
}
/deep/.tabs-s .el-tabs__active-bar{
  height: 2px !important;
}
.div-s{
  width: 100%;
  background-color: #FFFFFF;
}
.buttonItem{
  font-size: 14px;
  // color: #fff;
  // background-color: #f56c6c;
  // border: 1px solid #f56c6c;
}
.div-inquire{
  width: 100%;
  height: 45px !important;
  background-color: #ffffff;
  // display: flex;
  // align-items: center;
}
.div-button{
  width: 30%;
  float: right;
  margin-top: 15px;
}
.in-t{
  width: 50%;
  float: left;
  height: 45px;
  display: flex;
  align-items: center;
  // margin-top: 15px;
  h3{
    float: left;
    font-size: 16px;
    margin: 0px !important;
    padding: 0px !important;
    color: #000000;
  }
}
.in-ts{
  width: 5px;
  height: 18px;
  float: left;
  margin-right: 8px;
  background: #6E92E9;
}
.div-e{
  width: 100%;
  background-color: #FFFFFF;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 15px;
  margin-top: 15px;
}
.div-buttonItemb{
  float: right;
  font-size: 14px;
  i{
    font-size: 16px;
  }
}
   /deep/.sangeyuenei{
       color: #e6a23c;
       border: #e6a23c 1px solid;
       font-size: 14px;
       i{
         font-size: 16px !important;
       }
   }
   .sangeyuenei:hover{
       color: #fff;
       border: #e6a23c 1px solid;
       background-color: #e6a23c;
       font-size: 14px;
       i{
         font-size: 16px !important;
       }
   }
   /deep/.sangeyueneiB{
       color: #fff;
       border: #e6a23c 1px solid;
       background-color: #e6a23c;
       font-size: 14px;
       i{
         font-size: 16px !important;
       }
   }
   /deep/.yidaoqi{
     color: #f56c6c;
     border: solid #f56c6c 1px;
     font-size: 14px;
     i{
       font-size: 16px !important;
     }
   }
   /deep/.tabs-s{
  .el-tabs__header{
    .el-tabs__nav-wrap{
      margin-bottom: 0px !important;
     .el-tabs__nav-scroll{
      .el-tabs__nav{
        .el-tabs__item{
          border-right: none !important;
          border-left: none !important;
          background-color: #ffffff !important;
          // margin-left: 0px !important;
        }
      }
     }
    }
  }
}
/deep/.tabs-s{
.el-tabs__header{
  border-bottom: 1px solid #EBEEF5 !important;
  margin:0px 0px 8px 0px !important;
// .el-tabs__nav-wrap.is-scrollable{
//  padding:0px !important;
// }
  }
  }
   .yidaoqi:hover{
       color: #fff;
       border: #f56c6c 1px solid;
       background-color: #f56c6c;
       font-size: 14px;
       i{
         font-size: 16px !important;
       }
   }
   /deep/.yidaoqiB{
       color: #fff;
       border: #f56c6c 1px solid;
       background-color: #f56c6c;
       font-size: 14px;
       i{
         font-size: 16px !important;
       }
   }
   /deep/.yiyuqi{
     color: #C0C4CC;
     border: solid #C0C4CC 1px;
     font-size: 14px;
     i{
       font-size: 16px !important;
     }
   }
   .yiyuqi:hover{
       color: #fff;
       border: #C0C4CC 1px solid;
       background-color: #C0C4CC;
       font-size: 14px;
       i{
         font-size: 16px !important;
       }
   }
   /deep/.yiyuqiB{
       color: #fff;
       border: #C0C4CC 1px solid;
       background-color: #C0C4CC;
       font-size: 14px;
       i{
         font-size: 16px !important;
       }
   }
   .bangeyuenei{
     color: #67C23A;
     background-color: #fff;
     border: 1px solid #67C23A;
     font-size: 14px;
     i{
       font-size: 16px !important;
     }
   }
   .bangeyuenei:hover{
     color: #fff;
     background-color: #67C23A;
     border: 1px solid #67C23A;
     font-size: 14px;
     i{
       font-size: 16px !important;
     }
   }
   .bangeyueneiB{
     color: #fff;
     background-color: #67C23A;
     border: 1px solid #67C23A;
     font-size: 14px;
     i{
       font-size: 16px !important;
     }
   }
   .el-button--warning{
    background: #fff !important;
    border-color: #e6a23c !important;
    color:#e6a23c !important;
   }
   .el-button--warning.is-plain:focus, .el-button--warning.is-plain:hover{
    color: #e6a23c !important;
    background: #fdf6ec !important;
    border-color: #f5dab1 !important;
   }
   .el-button--danger{
    background: #f56c6c !important;
    border-color: #f56c6c !important;
    color:#fff !important;
   }
   .el-button--danger.is-plain:focus, .el-button--danger.is-plain:hover{
    color: #f56c6c !important;
    background: #fef0f0 !important;
    border-color: #fbc4c4 !important;
   }
   .weidaoqi{
     color: #409eff;
     border-color: #409eff;
     font-size: 14px;
   }
   /deep/.chongzhi{
       font-size: 14px;
       i{
         font-size: 16px !important;
       }
   }
   .itemButtons{
     font-size: 14px;
   }
    .el-card__body {
      padding: 10px 10px;
    }
    .picturess{
      font-size: 16px !important;
    }
    // .el-icon-bell{
    //  font-size: 16px;
    // }
    .el-tabs__nav-wrap::after{
      content:none
    }
    .queryFormItem{
      margin-top: 8px !important;
      // margin-bottom: 5px !important;
    }
    .queryFormItem .el-form-item{
      margin-bottom: 0px !important;
    }
    .el-button--danger {
      color: #f56c6c;
      background-color: #fff;
      border-color: #f56c6c;
    }
    .el-button--warning {
      color: #fc8e2d;
      background-color: #fff;
      border-color: #fc8e2d;
    }
    .el-button--info {
      color: #1b92fb;
      background-color: #fff;
      border-color: #1b92fb;
    }
</style>
